<template>
  <div class="main">
    <div class="main-1">
      <div class="main-2">
        <div class="main-3">
          <span style="margin-left: 15px; font-size: 13px;">
            当前部门：{{state.tableData.departmentName}}
          </span>
          <el-button style="margin-right: 15px;" @click="Return">
            返回
          </el-button>
        </div>
        <div class="main-4">
          <div class="main-5">
            <div class="main-6">
              <input type="checkbox" />
              <span>团课管理</span>
            </div>
            <div class="main-7">
              <div class="main-8">
                <input type="checkbox" />
                <span>团课添加/编辑</span>
              </div>
              <div class="main-8">
                <input type="checkbox" />
                <span>团课列表</span>
              </div>
              <div class="main-8">
                <input type="checkbox" />
                <span>团课查询</span>
              </div>
              <div class="main-8">
                <input type="checkbox" />
                <span>团课课程表</span>
              </div>
              <div class="main-8">
                <input type="checkbox" />
                <span>团课预约记录</span>
              </div>
              <div class="main-8"></div>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import {findDepartmentById} from '../../http/api'
const router: any = useRouter()
const route: any = useRoute()
var state :any = reactive({tableData:[]}) 
function Return() {
  router.push({ path: 'RoleManagement' })
}
onMounted(()=>{
  findDepartment()
})
const findDepartment:any = ()=>{
  findDepartmentById({id:route.query.id}).then((res)=>{
    console.log(res);
    state.tableData = res.data
  })
}

</script>

<style scoped>
.main {
  width: 100%;
  margin: auto;
  background-color: #f2f2f2;
  height: 1000px;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-1 {
  width: 96%;
  height: 99%;
  margin: auto;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-2 {
  height: 100%;
  border: 1px solid #e4e4e4;
  border-radius: 15px;
}
.main-3 {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: #f3f3f3;
  border-radius: 15px 15px 0 0;
  align-items: center;
}
.main-4 {
  background-color: white;
}
.main-5 {
  width: 95%;
  border: 1px solid #f3f3f3;
  margin: 30px auto;
  border-radius: 15px 15px 0 0;
  font-size: 14px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.main-6 {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #f9fafc;
  border-radius: 15px 15px 0 0;
  margin-left: 27px;
}
.main-7 {
  height: 40px;
  display: flex;
  justify-content: space-around;
}
.main-8 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid #e4e4e4;
}
.btn{
  display: flex;
  justify-content: center;
}
</style>
